<template>
	<div class="userBg">
		<div class="formBox">
			<div class="item" v-for="(item,index) in qingjiaList" :key="index">
				<ul>
					<li><div class="label">开始时间：</div> {{ item.startTime }}</li>
					<li><div class="label">结束时间：</div> {{ item.endTime }}</li>
					<li v-if="item.xiaojia"><div class="label">销假时间：</div> {{ item.xiaojiaTime }}</li>
				</ul>
				<div class="btnBox" v-if="!item.xiaojia">
					<u-button type="error" text="立即销假" @click="subInfo(item)"></u-button>
				</div>
				
				<image v-else src="https://www.baixuemianshi.com/zhuanti/images/xiaojia.png" mode="widthFix" class="xiaojia"></image>
			</div>
		</div>
		
		<div class="loadingBox" v-if="showLoading">
			<image src="https://www.baixuemianshi.com/zhuanti/tingkezheng/images/loading.gif" mode="widthFix"></image>
		</div>
		
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				openid:"",
				userinfo:"",
				startTime: "请选择开始时间",
				showStartDate:false,
				endTime: "请选择结束时间",
				showEndDate:false,
				reason:"",
				qingjiaList:[],
				showList:false,
				showLoading: true
			}
		},
		onLoad(options) {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			qjTime(){
				let that= this
				let leftTime = new Date(that.endTime) - new Date(that.startTime)
				var daysRemaining = Math.floor(leftTime / (1000 * 3600 * 24));
				var hoursRemaining = Math.floor((leftTime % (1000 * 3600 * 24)) / (1000 * 3600));
				
				if(!isNaN(daysRemaining) && !isNaN(hoursRemaining)){
					return daysRemaining + '天' + hoursRemaining + '小时'
				}else{
					return '总请假时长'
				}
				
			}
		},
		created() {
			let that = this;
			if(!this.userphone){
				this.getopenid()
			}else{
				this.getqingjiauser()
			}
			
		},
		mounted() {
			let that = this 
			
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						wx.setStorageSync("useropenid", res.result.openid)
						that.openid = res.result.openid
						that.getUserDetail()
					}
				})
			},
			getUserDetail() {
				let that = this
				db.collection('all_user').where({
					_openid: that.openid
				}).get({
					success: res => {
						console.log(res)
						if (res.data.length > 0) {
							that.LogSetPhone(res.data[0].phone)
							that.getqingjiauser()
						}else{
							wx.showToast({
								title:"您未办理听课证",
								icon:"error"
							})
						}
					}
				})
			},
			getqingjiauser(){
				let that = this
				db.collection('24gk_tkzinfo').where({
					phone: that.userphone
				}).get({
					success: res => {
						if (res.data.length > 0) {
							that.userinfo = res.data[0]
							that.getMyJl(0)
						}else{
							wx.showToast({
								title:"您未办理听课证",
								icon:"error"
							})
						}
						that.showLoading = false
					}
				})
			},
			subInfo(info){
				let that = this
				that.showLoading = true
				db.collection('24sk_zgshqj').doc(info._id).update({
					data:{
						xiaojia: true,
						xiaojiaTime: that.getTime()
					},
					success: res=>{
						wx.showToast({
							title:"销假成功！",
							icon:"success"
						})
						that.getMyJl(0)
					}
				})
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu
				return time
			},
			getMyJl(page){
				let that = this
				if(page == 0){
					that.qingjiaList = []
				}
				db.collection('24sk_zgshqj').where({phone:that.userphone}).skip(page * 20).limit(20).orderBy('time','desc').get({
					success: res => {
						if(res.data.length > 0){
							that.qingjiaList = that.qingjiaList.concat(res.data)
							let p = page + 1
							that.getMyJl(p)
						}else{
							that.showList = true
							that.showLoading = false
						}
					}
					
				})
			}
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>